<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <meta name="keywords" content="关键词">
        <meta name="description" content="描述">
        <meta name="author" content="潭州教育-阿飞老师">
        <style>
            body{font-family: "Microsoft YaHei",serif;}
            body,dl,dd,p,h1,h2,h3,h4,h5,h6{margin:0;}
            ol,ul,li{margin:0;padding:0;list-style:none;}
            img{border:none;}
            body{
                overflow: hidden;
            }
            #wrap{
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
            }
            #wrap p{
                position: absolute;
                left: 80px;
                top: 80px;
                width: 80px;
                height: 80px;
                background: radial-gradient(#fff,#f00);
                border-radius: 50%;
            }
        </style>
    </head>
    <body>
        <div id="wrap"></div>
        
        <script>

            (function(){
                //重要变量
                let oWrap = document.getElementById("wrap");

                //生成十个小球
                (function(){
                    //节点片段
                    let oF = document.createDocumentFragment();
                    for(let i=0;i<10;i++){
                        let oP = document.createElement("p");
                        oF.appendChild(oP);
                    }
                    oWrap.appendChild(oF);
                })();

                //运动
                (function(){
                    let aP = [...oWrap.children];
                    console.log(aP);

                    //随机初始速度（变化量）
                    let speedArr = [];
                    aP.forEach((ele,index)=>{
                        speedArr[index]={
                            speedX : Math.floor(Math.random()*10+2),
                            speedY : Math.floor(Math.random()*10+2)
                        };
                    });
                    console.log(speedArr);

                    //获取以及刷新最大值
                    let maxLeft,maxTop;
                    window.onresize = function r(){
                        maxLeft = window.innerWidth - 80;
                        maxTop = window.innerHeight - 80;
                        return r;
                    }();

                    //运动
                    !function m(){
                        aP.forEach((ele,index)=>{
                            //变化left,top
                            let left = ele.offsetLeft + speedArr[index].speedX,
                                top = ele.offsetTop + speedArr[index].speedY;
                            //最大最小值判断
                            if( left >= maxLeft ){
                                left = maxLeft;
                                speedArr[index].speedX = -speedArr[index].speedX;
                                changeColor(ele);
                            }
                            if( left <= 0 ){
                                left = 0;
                                speedArr[index].speedX = -speedArr[index].speedX;
                                changeColor(ele);
                            }
                            if( top >= maxTop ){
                                top = maxTop;
                                speedArr[index].speedY = -speedArr[index].speedY;
                                changeColor(ele);
                            }
                            if( top <= 0 ){
                                 top = 0;
                                speedArr[index].speedY = -speedArr[index].speedY;
                                changeColor(ele);
                            }
                            //位置改变
                            ele.style.left = left+'px';
                            ele.style.top = top+'px';
                        });
                        requestAnimationFrame(m);
                    }();

                    //颜色的变化
                    function changeColor(ele){
                        let [r,g,b]=[
                            Math.floor(Math.random()*256),
                            Math.floor(Math.random()*256),
                            Math.floor(Math.random()*256)
                        ];
                        ele.style.background = `radial-gradient(#fff,rgb(${r},${g},${b}))`;
                    }

                })();




            })();

        </script>
    </body>
</html>














